<template>
  <div class="songlist-page">
    <div class="page-header">
      <button class="back-btn" @click="back">
        <i class="fas fa-chevron-left"></i>
      </button>
      <h2>{{ getPlaylistDisplayName() }}</h2>
    </div>
    
    <div class="songlist-content">
      <div 
        v-for="song in songs" 
        :key="song.id" 
        class="song-item"
        @click="selectSong(song)"
      >
        <div class="song-info">
          <div class="song-name">{{ song.name }}</div>
          <!-- <div class="song-artist">{{ song.artist }}</div> -->
        </div>
        <i class="fas fa-play"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { apiService } from '../utils/http'

export default {
  name: 'SongListPage',
  props: {
    // 现在接收完整的歌单对象
    selectedPlaylist: {
      type: Object,
      default: () => ({ play: '', nickname: '' })
    }
  },
  emits: ['select-song', 'back', 'song-list'],
  setup(props, { emit }) {
    const songs = ref([])
    
    // 获取歌单显示名称
    const getPlaylistDisplayName = () => {
      return props.selectedPlaylist.nickname || props.selectedPlaylist.play || '歌单'
    }
    
    const fetchSongs = async () => {
      if (!props.selectedPlaylist.play) return
      
      try {
        // 调用接口时使用 play 字段作为参数
        const res = await apiService.post('/QuerySongList', { play: props.selectedPlaylist.play })
        songs.value = res.data.songList
        emit('song-list', songs.value)
      } catch (error) {
        console.error('获取歌曲列表失败:', error)
        songs.value = []
      }
    }
    
    onMounted(fetchSongs)
    watch(() => props.selectedPlaylist.play, fetchSongs)
    
    const selectSong = (song) => {
      emit('select-song', song)
    }
    
    const back = () => {
      emit('back')
    }
    
    return {
      songs,
      getPlaylistDisplayName,
      selectSong,
      back
    }
  }
}
</script>

<style scoped>
.songlist-page {
  min-height: 100vh;
  background: white;
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.back-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #c62828;
  cursor: pointer;
  margin-right: 15px;
}

.page-header h2 {
  color: #333;
  font-size: 20px;
}

.songlist-content {
  display: flex;
  flex-direction: column;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.song-item:hover {
  background: #f9f9f9;
}

.song-info {
  flex: 1;
}

.song-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.song-artist {
  font-size: 14px;
  color: #999;
}

.song-item i {
  color: #c62828;
  font-size: 16px;
}
</style>
